<template>
  <div class="company-cancel">
    <van-header title="公司注销"/>
    <img src="~assets/cancellationofcompan.png"/>
    <section class="process">
      <van-title :border="false" title="注销流程"/>
      <van-grid icon-size="50px" :border="false">
        <van-grid-item v-for="item in list" :key="item.text" :icon="item.icon" :text="item.text"/>
      </van-grid>
    </section>
    <section class="need">
      <van-title :border="false" title="注销所需材料"/>
      <ul>
        <li>1、营业执照正副本、代码证正副本、税务登记证正副本、公章、财务章、法人章（已三证合一不需提供代码证、税务登记证）；</li>
        <li>2、银行开户许可证、银行对账单；</li>
        <li>3、法人身份证、股东身份证复印件（股东为法人的提供营业执照副本）、股东印章；</li>
        <li>4、报表、账本、凭证、税务申报表。</li>
        <li>备注：若以上资料缺少，必然导致注销费用的增加。</li>
      </ul>
    </section>
    <section class="other">
      <van-title :border="false" title="公司不注销的后果"/>
      <van-grid :border="false" :column-num="3" :gutter="10">
        <van-grid-item v-for="item in data" :key="item.text" :text="item.text"/>
      </van-grid>
    </section>
    <section class="reason">
      <van-title :border="false" title="公司注销的原因"/>
      <ul>
        <li>1、股东或股东会作出公司解散决议</li>
        <li>2、公司依法宣告破产</li>
        <li>3、公司章程规定营业期限届满且不续</li>
        <li>4、公司章程或法律规定的解散事由出现</li>
        <li>5、公司因合并、分立解散</li>
        <li>6、公司依法被强制解散</li>
        <li>7、公司吊销或者注销后转注销</li>
      </ul>
    </section>
    <van-footer/>
  </div>
</template>

<script>
  import VanFooter from "../components/van-footer";

  export default {
    name: "companyCancel",
    components: {VanFooter},
    data() {
      return {
        list: [
          {
            icon: require('~/assets/nssb.png'),
            text: '1.清缴税控盘 发票'
          },
          {
            icon: require('~/assets/dljz1.png'),
            text: '2.注销国税、地税'
          },
          {
            icon: require('~/assets/swch.png'),
            text: '3.成立清算组登报'

          },
          {
            icon: require('~/assets/cwgl.png'),
            text: '4.注销工商'
          },
          {
            icon: require('~/assets/zzsb.png'),
            text: '5.注销社保账户'
          },
          {
            icon: require('~/assets/zzsj.png'),
            text: '6.注销印章'
          },
          {
            icon: require('~/assets/zzyq.png'),
            text: '7.注销银行'
          },
          {
            icon: require('~/assets/zzyq.png'),
            text: '8.注销成功'
          }
        ],
        data: [
          {
            text: '无法办理贷款'
          },
          {
            text: '进入工商黑名单'
          },
          {
            text: '无法办理移民'
          },
          {
            text: '每年将产生罚款'
          },
          {
            text: '个人征信留下污点'
          },
          {
            text: '无法领取养老保险'
          }
        ]
      }
    }
  }
</script>

<style scoped lang="less">
  .company-cancel {
    > img {
      width: 100%;
      display: block;
    }

    .process {
      border-bottom: 3px solid #EEEEEE;

      /deep/ .van-grid {
        .van-icon {
          background: #F4F4F4;
          border-radius: 50%;
          width: 50px;
          text-align: center;

          img {
            width: 25px;
          }
        }

        .van-grid-item {
          &:nth-child(4), &:nth-child(6), &:nth-child(7), &:nth-child(8) {
            .van-grid-item__content {
              justify-content: flex-start;
            }
          }
        }

        .van-grid-item__text {
          font-size: 11px;
          font-weight: 500;
          color: #484848;
          text-align: center;
        }

      }
    }

    .other {
      border-bottom: 3px solid #EEEEEE;
      padding-bottom: 30px;

      /deep/ .van-grid {
        margin-top: 30px;

        .van-grid-item__content {
          border: 2px solid #AB2333;
          border-radius: 15px;
          box-shadow: 0px 0px 13px 0px rgba(75, 31, 166, 0.29);
          padding: 5px 0;
          height: auto;
        }

        /deep/ .van-grid-item__text {
          font-size: 11px;
          color: #040404;
        }

        .van-grid-item:nth-child(4), .van-grid-item:nth-child(5), .van-grid-item:nth-child(6) {
          margin-top: 30px !important;
        }
      }
    }

    .need {
      padding: 0 10px;

      ul {
        margin-top: 31px;
        padding: 30px 14px 29px 14px;
        background: #FFFFFF;
        box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.29);
        border-radius: 5px;

        li {
          font-size: 11px;
          font-weight: 400;
          color: #000;
          line-height: 21px;
        }
      }
    }

    .reason {
      padding: 0 10px 30px;
      border-bottom: 3px solid #EEEEEE;

      ul {
        margin-top: 15px;
        padding: 15px 0 22px 22px;
        background: #FFFFFF;
        box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.29);
        border-radius: 5px;

        li {
          font-size: 11px;
          font-weight: 400;
          color: #000;
          line-height: 21px;
        }
      }
    }
  }
</style>
